<template>
   <!-- props: href 跳转的链接 -->
    <!-- props: route对象 -->
    <!-- props: navigate导航函数 -->
    <!-- props: isActive 是否当前处于活跃的状态 -->
    <!-- props: isExactActive 是否当前处于精确的活跃状态 -->
    <router-link to="/home" v-slot="props" custom>
      <button @click="props.navigate">{{props.href}}</button>
      <button @click="props.navigate">哈哈哈</button>
      <span :class="{'active': props.isActive}">{{props.isActive}}</span>
      <span :class="{'active': props.isActive}">{{props.isExactActive}}</span>
      <!-- <p>{{props.route}}</p> -->
    </router-link>
  <router-link to="/about" active-class="c-active">关于</router-link>
  <router-link to="/user/why/id/13" active-class="c-active">用户</router-link>
   <router-link to="/category" active-class="c-active">分类</router-link>
  <router-view v-slot="props">
    <transition name="why">
      <keep-alive>
        <component :is="props.Component"></component>
      </keep-alive>
    </transition>
  </router-view>

  <button @click="jumpPage">关于</button>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "App",
  // methods: {
  //   jumpPage() {
  //     this.$router.push("/about");
  //   },
  // },

  setup() {
    const router = useRouter();
    const jumpPage = () => {
      // router.push("/about");
      router.push({
        path: "/about",
        query: {
          name: "why",
          age: 18,
        },
      });
    };
    return {
      jumpPage,
    };
  },
};
</script>

<style>
.c-active {
  color: red;
}

.why-enter-from,
.why-leave-to {
  opacity: 0;
}

.why-enter-active,
.why-leave-active {
  transition: opacity 1s ease;
}
</style>
